<template>
  <el-card
    class="work-repair work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="work-repair__header work-bench-department__card__header">
      <span class="work-bench-department__card__title work-repair__title">工单统计</span>
      <el-radio-group v-model="type" size="mini" @change="queryDeptWorkOrderChart(type, organId)">
        <el-radio-button :label="1">日</el-radio-button>
        <el-radio-button :label="2">周</el-radio-button>
        <el-radio-button :label="3">月</el-radio-button>
      </el-radio-group>
    </div>
    <div class="work-bench-department__card__body work-repair__body">
      <div class="work-repair__total-wrapper">
        <div class="work-repair__util">单</div>
        <div>总计:</div>
        <div class="work-repair__total">{{ total }}</div>
      </div>
      <div ref="workOrderLineChartRef" class="work-repair__chart">暂无数据!</div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'
import { drewLine } from './line'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptRepair',

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  data() {
    return {
      /**
       * 总计
       */
      total: 0,
      /**
       * @description 时间类型
       * -1日
       * -2周
       * -3月 默认1日
       */
      type: 1,
    }
  },

  methods: {
    /**
     * @function 工单统计
     * @param {Number} type -时间类型
     * @param {String} organId -部门ID
     */
    queryDeptWorkOrderChart(type, organId) {
      if (!type || !organId) return

      dashboardDeptApi.queryDeptWorkOrderChart({ type, organId }).then((res) => {
        const first = (res.chart || [])[0] || {}
        const firstHead = (first.head || [])[0] || {}
        const firstData = (first.data || [])[0] || {}
        this.total = firstHead.value
        this.$nextTick(() => {
          drewLine(this.$refs.workOrderLineChartRef, first.xdata || [], firstData.ydata || [])
        })
      })
    },
  },
  mounted() {
    this.queryDeptWorkOrderChart(this.type, this.organId)
  },
  watch: {
    organId(newVal) {
      this.queryDeptWorkOrderChart(this.type, newVal)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
